<header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top header-normal" data-scroll-header="" style="">
    <div class="container-fluid pe-lg-4">
        <div class="d-flex align-items-center">
            <a href="index.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2">
                <img class="logo-dark" src="/image/logo.png" width="35" alt="PhpWebStudy">
                <img class="logo-light" src="/image/logo-light.png" width="35" alt="PhpWebStudy">
                PhpWebStudy
            </a>
        </div>
        <div class="d-flex align-items-center w-100">
            <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;">
                <li class="nav-item">
                    <a class="nav-link" title="PhpWebStudy-{{ t 'header.HomePage' }}" href="index.html">PhpWebStudy</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" title="PhpWebStudy-{{ t 'header.Download' }}" href="download.html">{{ t 'header.Download' }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" title="PhpWebStudy-{{ t 'header.Documentation' }}" href="help-0-1.html">{{ t 'header.Documentation' }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" title="PhpWebStudy-{{ t 'header.About' }}" href="about.html">{{ t 'header.About' }}</a>
                </li>
            </ul>
            <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#componentsNav" aria-controls="componentsNav" aria-label="Toggle navigation">
                <p class="navbar-toggler-icon"></p>
            </button>
            <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode">
                <input type="checkbox" class="form-check-input" id="theme-mode">
                <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label>
                <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label>
            </div>
            <ul class="navbar-nav me-auto d-none d-lg-inline-flex">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">{{ t 'header.Language' }}</a>
                    <ul class="dropdown-menu dropdown-menu-dark">
                        <li lang="en"><a href="/en/{{path}}" class="dropdown-item" title="Show content in English">English</a></li>
                        <li lang="zh"><a href="/zh/{{path}}" class="dropdown-item" title="显示中文版内容">中文</a></li>
                        <li lang="ja"><a href="/ja/{{path}}" class="dropdown-item" title="コンテンツを日本語で表示">日本</a></li>
                        <li lang="ko"><a href="/ko/{{path}}" class="dropdown-item" title="콘텐츠를 한국어로 표시">한국인</a></li>
                        <li lang="fr"><a href="/fr/{{path}}" class="dropdown-item" title="Afficher le contenu en français">Français</a></li>
                        <li lang="de"><a href="/de/{{path}}" class="dropdown-item" title="Inhalte auf Deutsch anzeigen">Deutsch</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</header>
